import { Venn } from '@ant-design/plots';
import React from 'react';
interface VennChartProps {
  vennChartID: string;
  VennChartDataList: VennChartDataList;
}

type VennChartDataList = VennChartData[];

type VennChartData = {
  sets: string[];
  size: number;
  label: string;
  value: string;
};

const VennChart: React.FC<VennChartProps> = ({
  vennChartID,
  VennChartDataList,
}) => {
  const vennChartData = VennChartDataList;
  const config = {
    data: vennChartData,
    autoFit: 'true',
    legend: {
      color: {
        itemLabelFontSize: 12,
        itemLabelFill: '#fff',
      },
      size: {},
    },
    setsField: 'sets',
    sizeField: 'size',
    style: { fillOpacity: 0.85 },
    label: {
      visible: true,
      position: 'inside',
      text: (d: any) => d.value || '',
    },
    tooltip: {
      title: false,
      items: [
        (d: any) => {
          return { name: d.label, value: d.value };
        },
      ],
    },
    state: {
      active: {
        fillOpacity: 0.8,
        stroke: 'red',
        lineWidth: 1,
      },
      inactive: {
        fillOpacity: 0.2,
        lineWidth: 0,
      },
    },
    interaction: {
      elementHighlight: true,
    },
  };
  return <Venn id={vennChartID} {...config} />;
};

export default VennChart;
